<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="fonts/icomoon.css" />
    <link rel="stylesheet" href="css/index.css">
    <script src="js/echarts.min.js"></script>
    <script src="js/flexible.js"></script>
    <script src="js/jquery.min.js"></script>

    <style>

    </style>
</head>

<body>
    <!-- 父盒子 -->
    <div class="viewport">
        <!-- 左边 -->
        <div class="column">
            <div class="left-top common">
                <div class="f">
                    <ul>
                        <li>
                            <h4>2,190</h4>
                            <p><i class="icon-dot" style="color: #006cff"></i>季度新增</p>
                        </li>
                        <li>
                            <h4>190</h4>

                            <p><i class="icon-dot" style="color: #6acca3"></i>设备总数</p>
                        </li>
                        <li>
                            <h4>3,001</h4>
                            <p><i class="icon-dot" style="color: #6acca3"></i>运营设备</p>
                        </li>
                        <li>
                            <h4>108</h4>
                            <p><i class="icon-dot" style="color: #ed3f35"></i>异常设备</p>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="left-center common">
                <div class="f">
                    <div class="left-center-top j">
                        <a href="javascript:;">故障设备监控</a>
                        <a href="javascript:;">异常设备监控</a>
                    </div>
                    <div class="left-center-center">
                        <span>异常时间</span>
                        <span>设备地址</span>
                        <span>异常代码</span>
                    </div>
                    <div class="left-center-bottom y">
                        <ul class="beij">
                            <li>
                                <span>
                                    <i class="icon-dot"></i> 20190701</span>
                                <span>北京市昌平区建材城西路金燕龙写字楼</span>
                                <span>1000001</span>
                            </li>
                            <li>
                                <span>
                                    <i class="icon-dot"></i> 20190701</span>
                                <span>北京市昌平区建材城西路金燕龙写字楼</span>
                                <span>1000002</span>
                            </li>
                            <li>
                                <span>
                                    <i class="icon-dot"></i> 20190701</span>
                                <span>北京市昌平区建材城西路金燕龙写字楼</span>
                                <span>1000003</span>
                            </li>
                            <li>
                                <span>
                                    <i class="icon-dot"></i> 20190701</span>
                                <span>北京市昌平区建材城西路金燕龙写字楼</span>
                                <span>1000004</span>
                            </li>
                            <li>
                                <span>
                                    <i class="icon-dot"></i> 20190701</span>
                                <span>北京市昌平区建材城西路金燕龙写字楼</span>
                                <span>1000005</span>
                            </li>
                            <li>
                                <span>
                                    <i class="icon-dot"></i> 20190701</span>
                                <span>北京市昌平区建材城西路金燕龙写字楼</span>
                                <span>1000006</span>
                            </li>
                            <li>
                                <span>
                                    <i class="icon-dot"></i> 20190701</span>
                                <span>北京市昌平区建材城西路金燕龙写字楼</span>
                                <span>1000007</span>
                            </li>
                            <li>
                                <span>
                                    <i class="icon-dot"></i> 20190701</span>
                                <span>北京市昌平区建材城西路金燕龙写字楼</span>
                                <span>1000008</span>
                            </li>
                            <li>
                                <span>
                                    <i class="icon-dot"></i> 20190701</span>
                                <span>北京市昌平区建材城西路金燕龙写字楼</span>
                                <span>1000009</span>
                            </li>
                            <li>
                                <span>
                                    <i class="icon-dot"></i> 20190701</span>
                                <span>北京市昌平区建材城西路金燕龙写字楼</span>
                                <span>1000010</span>
                            </li>
                        </ul>
                        <ul class="beij1">
                            <li>
                                <span>
                                    <i class="icon-dot"></i> 20190701</span>
                                <span>湖南昌平区建材城西路金燕龙写字楼</span>
                                <span>1000001</span>
                            </li>
                            <li>
                                <span>
                                    <i class="icon-dot"></i> 20190701</span>
                                <span>湖南市昌平区建材城西路金燕龙写字楼</span>
                                <span>1000002</span>
                            </li>
                            <li>
                                <span>
                                    <i class="icon-dot"></i> 20190701</span>
                                <span>话市昌平区建材城西路金燕龙写字楼</span>
                                <span>1000003</span>
                            </li>
                            <li>
                                <span>
                                    <i class="icon-dot"></i> 20190701</span>
                                <span>收到VS发京市昌平区建材城西路金燕龙写字楼</span>
                                <span>1000004</span>
                            </li>
                            <li>
                                <span>
                                    <i class="icon-dot"></i> 20190701</span>
                                <span>北的VS市昌平区建材城西路金燕龙写字楼</span>
                                <span>1000005</span>
                            </li>
                            <li>
                                <span>
                                    <i class="icon-dot"></i> 20190701</span>
                                <span>北京市昌平区建材城西路金燕龙写字楼</span>
                                <span>1000006</span>
                            </li>
                            <li>
                                <span>
                                    <i class="icon-dot"></i> 20190701</span>
                                <span>天津市昌平区建材城西路金燕龙写字楼</span>
                                <span>1000007</span>
                            </li>
                            <li>
                                <span>
                                    <i class="icon-dot"></i> 20190701</span>
                                <span>海里昌平区建材城西路金燕龙写字楼</span>
                                <span>1000008</span>
                            </li>
                            <li>
                                <span>
                                    <i class="icon-dot"></i> 20190701</span>
                                <span>你好呀昌平区建材城西路金燕龙写字楼</span>
                                <span>1000009</span>
                            </li>
                            <li>
                                <span>
                                    <i class="icon-dot"></i> 20190701</span>
                                <span>dgz昌平区建材城西路金燕龙写字楼</span>
                                <span>1000010</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="left-bottom common">
                <div class="f">
                    <h3>点位分布统计</h3>
                    <div class="left-bottom-bottom">
                        <span class="chart1">
                        </span>
                        <div class="tishi">
                            <div class="s">
                                <h4>320,11</h4>
                                <span> <i class="icon-dot" style="color: #ed3f35"></i> 点位总数</span>
                            </div>

                            <div class="x">
                                <h4>418</h4>
                                <span> <i class="icon-dot" style="color:  #eacf19"></i>本月新增</span>
                            </div>


                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- 中间 -->
        <div class="column">
            <div class="center-center">
                <h3>
                    <span class="icon-cube"></span>
                    设备数据统计
                </h3>
                <div class="map"></div>
            </div>
            <div class="center-bottom common">
                <div class="f">
                    <h3>点位分布统计</h3>
                    <div class="tongji">
                        <div class="chart2"></div>
                        <div class="tishi2">
                            <div class="s2">
                                <h4>120,899</h4>
                                <span> <i class="icon-dot" style="color: red"></i>用户总量</span>
                            </div>
                            <div class="x2">
                                <h4>248</h4>
                                <span> <i class="icon-dot" style="color:  #eacf19"></i>本月新增</span>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <!-- 右边 -->
        <div class="column">
            <div class="right-top common">
                <div class="f">
                    <ul class="riqi">
                        <li>365天</li>
                        <li>90天</li>
                        <li>30天</li>
                        <li>24小时</li>
                    </ul>
                    <div class="shuliang">
                        <h4>20,301,987</h4>
                        <h4>99834</h4>
                    </div>
                    <div class="biaoti">
                        <p><i class="icon-dot" style="color: #ed3f35"></i>订单量</p>
                        <p><i class="icon-dot" style="color: #eacf19"></i>销售额(万元)</p>
                    </div>
                </div>
            </div>
            <div class="right-center1 common">
                <div class="f">
                    <div class="top">
                        <h3>销售额统计</h3>
                        <div class="jidu">
                            <a href="javascript:;" class="bgc">年</a>
                            <a href="javascript:;">季</a>
                            <a href="javascript:;">月</a>
                            <a href="javascript:;">周</a>
                        </div>
                    </div>
                    <div class="chart3">
                    </div>

                </div>
            </div>
            <div class="right-center2">
                <div class="right-center2-left common">
                    <div class="f">
                        <h3>渠道分布</h3>
                        <div class="chart4">

                        </div>
                    </div>
                </div>
                <div class="right-center2-right common">
                    <div class="f">
                        <h3>一季度销售进度</h3>
                        <div class="chart5"></div>
                        <span>50%</span>
                        <div class="l">
                            <h3>1,321</h3>
                            <h3>150%</h3>
                        </div>
                        <div class="b">
                            <p><i class="icon-dot" style="color: #6acca3"></i> 销售额(万元)</p>
                            <p><i class="icon-dot" style="color: #ed3f35"></i>同比增长 </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right-bottom common">
                <div class="f">
                    <div class="head">
                        <h2>全国热榜</h2>
                        <h3>各省热销</h3>
                        <p>// 近30日 //</p>
                    </div>
                    <div class="footer">
                        <ul class="one">
                            <li> <i class="icon-cup2" style="color: #68d8fe"></i>可爱多
                            </li>
                            <li>
                                <i class="icon-cup1" style="color: #d93f36"></i>娃哈哈
                            </li>
                            <li> <i class="icon-cup3" style="color: #4c9bfd"></i>喜之郎</li>
                        </ul>
                        <ul class="two">
                        </ul>
                        <ul class="three">
                            <li><span>可爱多</span><span>9,086</span><s class="icon-up"></s></li>
                            <li><span>娃哈哈</span><span>8,341</span><s class="icon-up"></s></li>
                            <li><span>喜之郎</span><span>7,407</span><s class="icon-down"></s></li>
                            <li><span>八喜</span><span>6,724</span><s class="icon-down"></s></li>
                            <li><span>小洋人</span><span>6,724</span><s class="icon-down"></s></li>
                            <li><span>好多鱼</span><span>2,170</span><s class="icon-up"></s></li>

                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="js/index.js"></script>
<script src="js/china.js"></script>
<!-- 引入我们自己的地图js文件 -->
<script src="js/myMap.js"></script>

</html>